<template name="love">
	<view>
		<img src="/static/love_bg.jpg" style="position:absolute;right:0;width:100%;height:100%;opacity:0.5;" />
		<DaDropdownVue2
			ref="daDropdown"
		    :dropdownMenu="dropdownMenuList"
		    themeColor="#ffcd4c"
		    textColor="#aaaaaa"
			bgColor="#F8F0E9"
		    :duration="300"
		    fixedTop
		    @confirm="handleConfirm"
		    @close="handleClose"
		    @open="handleOpen">
		    <!-- <template v-slot:slot1="{item,index}">
		      <view style="padding: 40px">自定义插槽内容</view>
		    </template> -->
		  </DaDropdownVue2>
		<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
			lower-threshold="112" >
			<!-- <view class="cu-bar bg-white solid-bottom fixed">
				<view class="action">
					<text class="cuIcon-title text-orange"></text> 筛选条件
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DrawerModalL">筛选</button>
				</view>
			</view> -->
			<view class="cu-list menu-avatar">
				<view class="cu-item" style="background:none;" v-for="(item,index) in list" :key="index">
					<!-- #ifdef H5 -->
					<view class="cu-avatar radius lg" v-lazy:background-image="{src:item.avatar}" @tap="previewImage(index)"></view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image class="cu-avatar radius lg" :lazy-load="true" :src="item.avatar" @tap="previewImage(index)"></image>
					<!-- #endif -->
					<view class="content" @tap="toDetail(item.account_id)">
						<view class="text-grey">
							<view class="text-cut">{{item.nick_name}}</view>
							<view class="text-cut">
								<text class="cuIcon-male text-blue  margin-right-xs" v-if="item.gender == '男'"></text>
								<text class="cuIcon-female text-red  margin-right-xs" v-if="item.gender == '女'"></text>
							</view> 
							<view v-if="item.birthday" class="cu-tag round bg-orange lg" style="letter-spacing: 1px;">{{calculateAge(item.birthday)}}岁</view>
							<!-- <view class="cu-tag round bg-orange lg" style="letter-spacing: 1px;">{{item.degree}}</view> -->
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
								<text class="cuIcon-locationfill text-orange margin-right-xs"></text> {{item.region[0]}} {{item.region[1]}} {{item.region[2]}}
							</view> 
						</view>
					</view>
					<!-- <view class="action">
						<view class="text-grey text-xs">{{timestampToString(item.updated_at)}}</view>
						<view class="cu-tag round bg-grey sm">5</view>
					</view> -->
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='Image'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<image :src="modalImg" mode="widthFix"></image>
				</view>
			</view>

			<!-- <view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
				<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
					<view class="cu-list menu text-left">
						<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
							<view class="content">
								<view>Item {{index +1}}</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</scroll-view>
	</view>
	
</template>

<script>
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
	const CHINA_REGIONS = require('@/components/da-dropdown-vue2/regions.json')
	import { profileInfo } from '../../api/account';
	import { objectList } from '../../api/object';
	export default {
		name: "love",
		components: { DaDropdownVue2 },
		data() {
			return {
				modalName: null,
				modalImg: null,
				list: [],
				page: 1,
				is_loading: false,
				imageList:[],
				dropdownMenuList: [
					// {
					//     title: '搜索',
					//     type: 'search',
					//     prop: 'god0',
					//   },
					// {
					//     title: '插槽1',
					//     type: 'slot1',
					//     prop: 'god1',
					//   },
					{
					    title: '地区',
					    type: 'picker',
					    prop: 'regins',
					    // showAll: true,
					    showIcon: true,
					    // showAll 为true时相当于在options第一的位置插入“不限”项
					    // { label: '不限', value: '-9999' },
					    field: {
					      label: 'label',
					      value: 'value',
					      children: 'children',
					    },
					    value: [], // 默认选中 级联X22
					    options: CHINA_REGIONS,
					},
					{
					    title: '筛选',
					    type: 'filter',
					    prop: 'filter',
					    value: { degrees: [], age: 30 },
					    options: [
					      {
					        title: '学历(多选)',
					        type: 'checkbox',
					        prop: 'degrees',
					        options: [
					          { label: '小学', value: '小学' },
					          { label: '初中', value: '初中' },
							  { label: '高中', value: '高中' },
							  { label: '大专', value: '大专' },
							  { label: '本科', value: '本科' },
							  { label: '硕士', value: '硕士' },
							  { label: '博士', value: '博士' },
					        ],
					      },
						  {
						    title: '年龄',
						    type: 'slider-box',
						    prop: 'age',
						    componentProps: {
						      min: 18,
						      max: 45,
						      step: 1,
						      showValue: true,
						    },
						  },
					    ],
					},
				],
				regions:['不限'],
				degrees:[],
				before:{},
				age:[18, 45]
			};
		},
		created() {
			// 获取个人资料
			// profileInfo().then(res => {
			// 	if (res == undefined || (res.code != undefined && res.code == 1001)) {
			// 		uni.navigateTo({
			// 		    url: '/pages/tools/editProfile'
			// 		});
			// 		return
			// 	}
			// }).catch(err => {
			// 	console.log(err)
			// 	uni.navigateTo({
			// 	    url: '/pages/tools/editProfile'
			// 	});
			// 	return
			// });
		
			// 展示女生列表
			objectList(
			{
				page: this.page, 
				regions: this.regions, 
				degrees: this.degrees,
				age: this.age
			}).then(res => {
				// console.log(res)
				if (res != undefined) {
					this.list = res.list
					if (res.list.length > 0) {
						this.page++
					}
					this.loadList()
				}
			}).catch(err => {
				console.log(err)
			});
						
			
		},
		methods: {
			handleConfirm(v) {
				let update = false
				if (v.regins != undefined && JSON.stringify(this.before.regions) != JSON.stringify(v.regins)) {
					// console.log(JSON.stringify(this.before.regions))
					// console.log(JSON.stringify(v.regins))
					this.regions = v.regins
					update = true
				}
				// console.log(JSON.stringify(this.before.degrees))
				// console.log(JSON.stringify(v.filter.degrees))
				// console.log(JSON.stringify(this.before.degrees) != JSON.stringify(v.filter.degrees))
				if (v.filter != undefined && (JSON.stringify(this.before.degrees) != JSON.stringify(v.filter.degrees)
				|| JSON.stringify(this.before.age) != JSON.stringify(v.filter.age))) {
					this.degrees = v.filter.degrees
					this.age = v.filter.age
					update = true
				}
				
				if (update) {
					// 重新加载数据
					this.page = 1
					objectList({
						page: this.page, 
						regions: this.regions, 
						degrees: this.degrees,
						age: this.age
					}).then(res => {
						// console.log(res)
						if (res != undefined) {
							this.list = res.list
							if (res.list.length > 0) {
								this.page++
							}
							this.loadList()
						}
					}).catch(err => {
						console.log(err)
					});
				}
				
				console.log('handleConfirm ==>', v, update)
			},
			handleClose(v) {
			  console.log('handleClose ==>', v)
			},
			handleOpen(v) {
				this.before = {}
				if (v == 0) {
					this.before.regions = JSON.parse(JSON.stringify(this.regions))
					this.$refs.daDropdown.updateMenu('regins', this.regions, 'value')
				} else if (v == 1) {
					this.before.degrees = JSON.parse(JSON.stringify(this.degrees))
					this.before.age = JSON.parse(JSON.stringify(this.age))
					this.$refs.daDropdown.updateMenu('filter', 
					{ 
						degrees: this.degrees, 
						age: this.age
					}, 'value')
				}
				console.log(this.before)
				console.log('handleOpen ==>', v)
			},
			previewImage(index) {
				uni.previewImage({
					indicator: "none",
					loop: false,
					urls: [this.list[index].avatar],
					longPressActions: {},
					sizeType: ['original']
				})
			},
			loadList() {
				// 当数据没填充整个高度时需要再次加载
				setTimeout(()=>{
					let that = this
					uni.getSystemInfo({
						success(res) {
							let screenHeight = res.screenHeight
							uni.createSelectorQuery().select('.cu-list').boundingClientRect(data => {
								if (screenHeight - data.height > 50) {
									
									// 数据没铺满继续加载
									objectList({
										page: that.page, 
										regions: that.regions, 
										degrees: that.degrees,
										age: that.age
									}).then(res2 => {
										// console.log(res2)
										if (res != undefined && res2.list != null) {
											if (res2.list.length > 0) {
												that.page++
											}
											that.list = that.list.concat(res2.list)
										}
									}).catch(err => {
										console.log(err)
									});
									
								}
							}).exec()
						}
					})
				},200)
			},
			showModal(index) {
				console.log(index)
				this.modalImg = this.list[index].photos[0]
				this.modalName = "Image"
			},
			hideModal(e) {
				this.modalName = null
			},
			toDetail(id) {
				uni.navigateTo({
				    url: '/pages/love/detail?id=' + id // 跳转到对应路径的页面
				});
			},
			lower() {
				if (!this.is_loading) {
					this.is_loading = true
					console.log('触底加载')
					objectList({
						page: this.page, 
						regions: this.regions, 
						degrees: this.degrees,
						age: this.age
					}).then(res => {
						// console.log(res)
						if (res != undefined && res.list != null) {
							this.list = this.list.concat(res.list)
							if (res.list.length > 0) {
								this.page++
							}
						}
					}).catch(err => {
						console.log(err)
					});
					this.is_loading = false
				}
			},
			// showModal(e) {
			// 	this.modalName = e.currentTarget.dataset.target
			// },
			// hideModal(e) {
			// 	this.modalName = null
			// },
			calculateAge(birthDateStr) {
				var birthDate = new Date(birthDateStr)
				var currentDate = new Date();
				var birthYear = birthDate.getFullYear();
				var birthMonth = birthDate.getMonth();
				var birthDayOfMonth = birthDate.getDate();
				var currentYear = currentDate.getFullYear();
				var currentMonth = currentDate.getMonth();
				var currentDayOfMonth = currentDate.getDate();
				 
				var age = currentYear - birthYear;
				if (currentMonth < birthMonth || (currentMonth == birthMonth && currentDayOfMonth < birthDayOfMonth)) {
				    age--;
				}
				return age;
			},
			timestampToString(timestamp) {
				var date = new Date(timestamp * 1000); // 由于时间戳通常以秒为单位，所以我们需要乘以1000
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				 
				// 补零操作
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				// seconds = seconds < 10 ? '0' + seconds : seconds;
				 
				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
			}
		}
	}
</script>

<style scoped>
	/* h5不用
	page {
		padding-top: 50px;
	} */
	.scrollbox {
		/* height: 100vh; */
		/* height: 80vh; */
		/* padding-top: 45px; */
		height: calc(100vh - 90px);
		/* background-image: url("");
		 */
	}
</style>
